<template>
    <div class="customOrder">
        <div class="_header">
            <p class="_header_title">新订单</p>
            <p class="_header_clear" @click="handleClearOrder()">清空订单</p>
        </div>

        <!-- 订单列表 -->
        <div class="_list">
            <template v-if="!orderList.length">
                <div class="_list_view">
                    <img src="@/assets/image/custom_table.png" class="_list_view_image">
                    <p class="_list_view_text">暂无订单提醒哦～</p>
                </div>
            </template>
            <template v-else>
                <div class="_box">
                    <div class="_box_nav">
                        <p
                            v-for="(row,index) in ['商品信息', '收件人信息', '实付金额']"
                            :key="index"
                            class="_box_title"
                        >
                            {{ row }}
                        </p>
                    </div>
                    <div class="_box_wrap">
                        <div
                            v-for="(row,index) in orderList"
                            :key="index"
                            class="_box_item"
                        >
                            <div class="_item_head">
                                <div class="_item_head_left">
                                    <p class="_item_order">订单编号: {{ row.order_no }}</p>
                                    <p class="_item_time">下单时间: {{ row.order_time * 1000 | dateFormatter }}</p>
                                </div>
                                <p class="_item_right" @click="handleContact(row)">
                                    联系买家
                                </p>
                            </div>
                            <div class="_wrap">
                                <div class="_left">
                                    <img :src="row.goods_cover" class="_goods_cover">
                                    <div class="_goods_info">
                                        <p class="_goods_title">{{ row.goods_title }}</p>
                                        <p class="_goods_num">共计{{ row.goods_num }}件商品</p>
                                    </div>
                                    <p class="_goods_line"></p>
                                </div>
                                <div class="_center">
                                    <!-- 非虚拟订单 -->
                                    <template v-if="row.order_category !== 10">
                                        <div class="_center_wrap">
                                            <p class="_center_name">{{ row.user_name }}</p>
                                            <p class="_center_name">{{ row.user_phone }}</p>
                                            <p class="_center_name">{{ row.detail_info }}</p>
                                        </div>
                                    </template>
                                    <!-- 虚拟订单 -->

                                    <template v-if="row.order_category == 10">
                                        <div class="_center_wrap">
                                            <p
                                                class="_center_name"
                                                v-for="(o, i) in row.virtual_buy_info"
                                                :key="i"
                                            >{{ o.title ? o.title+ '：' : '' }}{{ o.value }}</p>
                                        </div>
                                    </template>
                                </div>
                                <div class="_right">
                                    <p class="_right_money">买家实付：¥{{ row.money ? row.money : '0.00' }}</p>
                                    <p
                                        class="_right_money"
                                        :style="{marginTop: '13px'}"
                                    >商家入账：¥{{ row.hire_get_money ? row.hire_get_money : '0.00' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
            orderList: [],//订单列表
        };
    },
    computed: {
        ...mapState({
            order_change: state => state.global.order_change
        })
    },
    watch: {
        // 更新订单
        order_change () {
            this.getList();
        }
    },
    mounted () {
        this.getList();
    },
    methods: {
        /**
         * @description 获取订单列表
         */
        getList () {
            this.$post('/Session/getOrderSessionList',{}, resp => {
                if(resp.code == 1) {
                    if(!!resp.data.list.length) {
                        this.orderList = resp.data.list.reduce((cur,next) => {
                            const item_list = next.item_list[0];

                            cur.push({
                                order_no: next.order_no,
                                order_time: next.create_time,
                                goods_cover: item_list['goods_info']['goods_cover'],
                                goods_title: item_list['goods_info']['title'],
                                goods_num: !!next.item_list.length ? next.item_list.length : 0,
                                user_name: next.address_info.user_name,
                                user_phone: next.address_info.phone,
                                detail_info: next.address_info.province_name + next.address_info.city_name + next.address_info.county_name + next.address_info.detail_info,
                                money: next.money,
                                chat_no: next.chat_no,
                                session_no: next.session_no,
                                pay_type: next.pay_type,
                                virtual_buy_info: next.virtual_buy_info,
                                order_category: next.order_category,
                                hire_get_money: next.hire_get_money
                            });
                            return cur;
                        },[]);

                        this.$store.commit('global/SET_ORDER_LIST', this.orderList);
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 清空订单
         */
        handleClearOrder () {
            this.$post('/Session/clearOrderSession',{}, resp => {
                if(resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.orderList = [];
                    this.getList();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 联系买家
         */
        handleContact (row) {
            this.$emit('connect', row);
        }
    }
};
</script>

<style lang="less" scoped>
.customOrder {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    ._header {
        width: 100%;
        height: 64px;
        box-sizing: border-box;
        padding: 0 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px rgba(240, 242, 247, 1) solid;
        ._header_title {
            color: rgba(0, 0, 0, 0.8);
            font-size: 16px;
            font-weight: 500;
        }
        ._header_clear {
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
    }
    ._list {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 24px 32px;
        overflow: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }
        // 无数据
        ._list_view {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            ._list_view_image {
                width: 225px;
                height: 125px;
                margin-bottom: 12px;
            }
            ._list_view_text {
                color: rgba(0, 0, 0, 0.5);
                font-size: 12px;
            }
        }
        // 有数据
        ._box {
            width: 100%;
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            ._box_nav {
                width: 100%;
                height: 44px;
                display: flex;
                align-items: center;
                border-radius: 2px;
                background: rgba(244, 244, 244, 1);
                ._box_title:nth-child(1) {
                    width: 43%;
                    height: 44px;
                    line-height: 44px;
                    box-sizing: border-box;
                    padding-left: 24px;
                    color: rgba(0, 0, 0, 0.8);
                    font-size: 14px;
                    font-weight: 500;
                    white-space: nowrap;
                    margin-right: 20px;
                    min-width: 270px;

                }
                ._box_title:nth-child(2) {
                    width: 30%;
                    height: 44px;
                    line-height: 44px;
                    box-sizing: border-box;
                    color: rgba(0, 0, 0, 0.8);
                    font-size: 14px;
                    font-weight: 500;
                    white-space: nowrap;
                    margin-right: 20px;
                    min-width: 263px;
                }
                ._box_title:nth-child(3) {
                    width: 20%;
                    height: 44px;
                    line-height: 44px;
                    box-sizing: border-box;
                    color: rgba(0, 0, 0, 0.8);
                    font-size: 14px;
                    font-weight: 500;
                    white-space: nowrap;
                    // padding-left: 40px;
                }
            }
            ._box_wrap {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                overflow-y: auto;
                &::-webkit-scrollbar {
                    width: 4px;
                }
            }
            ._box_item {
                width: 100%;
                min-height: 149px;
                background: rgba(251, 251, 251, 1);
                border: 1px rgba(238, 238, 238, 1) solid;
                border-radius: 2px;
                display: flex;
                flex-direction: column;
                margin-top: 12px;
                ._item_head {
                    width: 100%;
                    height: 45px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 0 32px 0 24px;
                    justify-content: space-between;
                    border-bottom: 1px rgba(238, 238, 238, 1) solid;
                    ._item_head_left {
                        display: flex;
                        align-items: center;
                        ._item_order {
                            color: rgba(51, 51, 51, 1);
                            font-size: 12px;
                            white-space: nowrap;
                        }
                        ._item_time {
                            color: rgba(51, 51, 51, 1);
                            font-size: 12px;
                            white-space: nowrap;
                            margin-left: 40px;
                        }
                    }
                    ._item_right {
                        width: 68px;
                        height: 26px;
                        border: 1px rgba(32, 160, 255, 1) solid;
                        border-radius: 13px;
                        text-align: center;
                        line-height: 26px;
                        color: rgba(32, 160, 255, 1);
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
                ._wrap {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    height: 104px;
                    background: rgba(251, 251, 251, 1);
                    ._left {
                        width: 43%;
                        height: 104px;
                        min-width: 270px;
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        padding-left: 24px;
                        border-right: 1px rgba(220, 223, 230, 1) solid;
                        margin-right: 20px;
                        ._goods_cover {
                            width: 72px;
                            height: 72px;
                            margin-right: 15px;
                        }
                        ._goods_info {
                            max-width: 293px;
                            height: 70px;
                            display: flex;
                            justify-content: space-between;
                            box-sizing: border-box;
                            padding-right: 52px;
                            flex-direction: column;
                            ._goods_title {
                                height: 40px;
                                color: rgba(0, 0, 0, 0.8);
                                line-height: 20px;
                                font-size: 14px;
                                font-weight: 500;
                                overflow : hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                            }
                            ._goods_num {
                                color: rgba(51, 51, 51, 1);
                                font-size: 12px;
                                height: 16px;
                                line-height: 16px;
                            }
                        }
                    }
                    ._center {
                        width: 30%;
                        height: 104px;
                        min-width: 263px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding-right: 120px;
                        box-sizing: border-box;
                        border-right: 1px rgba(220, 223, 230, 1) solid;
                        margin-right: 24px;
                        ._center_wrap {
                            width: 306px;
                            height: 70px;
                            box-sizing: border-box;
                            padding-right: 65px;
                            display: flex;
                            flex-direction: column;
                            overflow: hidden;
                            overflow-y: auto;
                            &::-webkit-scrollbar {
                                width: 1px;
                            }
                            ._center_name {
                                color: rgba(51, 51, 51, 1);
                                font-size: 14px;
                                // white-space: nowrap;
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                word-break: break-all;
                                // line-height: 22px;
                            }
                            ._center_name:nth-child(1) {
                                margin-bottom: 13px;
                            }
                            ._center_name:nth-child(2) {
                                margin-bottom: 13px;
                            }
                        }
                    }
                    ._right {
                        width: 20%;
                        height: 104px;
                        display: flex;
                        flex-direction: column;
                        // align-items: center;
                        justify-content: center;
                        ._right_money {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }
}
</style>